<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <%@include file="include/header.jsp"%>
    <title>分配角色</title>
    <style>
        .m-select {
            width: 150px !important;
            height: 250px !important;
            overflow-y: auto;
        }
    </style>
</head>

<body>

<%@include file="include/nav.jsp"%>

<div class="container-fluid">
    <div class="row">
        <%@include file="include/sidebar.jsp"%>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <!-- 在此处绘制页面 -->
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" style="margin: 0; padding: 0; width: 100%">
                <ol class="breadcrumb">
                    <li><a href="admin/to/main/page.html">首页</a></li>
                    <li><a href="admin/get/page.html">数据列表</a></li>
                    <li class="active">分配角色</li>
                </ol>
                <div class="panel panel-default">
                    <div class="panel-body" style="padding-top: 0;">
                        <h3 style="margin: 20px 0;">角色分配管理：【${admin.username}】</h3>
                        <form id="assignForm" action="assign/do/role/assign.html" method="post" class="form-inline">
                            <%-- 隐藏表单项 管理员ID --%>
                            <input type="hidden" name="id" value="${admin.id}">
                            <input type="hidden" name="current" value="${current}">
                            <input type="hidden" name="query" value="${query}">
                            <%-- 已分配 --%>
                            <div class="form-group">
                                <label>已分配的角色(${assignRole.size()})</label><br>
                                <select multiple name="list" class="form-control m-select" size="10">
                                    <c:forEach items="${assignRole}" var="role">
                                        <option value="${role.id}">${role.name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                            <%-- 中间的操作按钮 --%>
                            <div class="form-group">
                                <ul>
                                    <li id="m-toLeft" class="btn btn-default glyphicon glyphicon-chevron-left" title="分配角色"></li>
                                    <br>
                                    <li id="m-toRight" class="btn btn-default glyphicon glyphicon-chevron-right" title="取消分配" style="margin-top: 15px;"></li>
                                    <br>
                                    <li id="m-sub" class="btn btn-default glyphicon glyphicon-ok" style="margin-top: 50px; background-color: rgba(251,255,46,0.27)" title="提交分配"></li>
                                </ul>
                            </div>
                            <%-- 未分配 --%>
                            <div class="form-group" style="margin-left:40px;">
                                <label>未分配的角色(${unAssignRole.size()})</label><br>
                                <select multiple class="form-control m-select" size="10">
                                    <c:forEach items="${unAssignRole}" var="role">
                                        <option value="${role.id}">${role.name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $(()=>{
        // 分配的按钮
        $("#m-toLeft").click(()=>{
            $("select:eq(1)>option:selected").appendTo("select:eq(0)")
        });
        // 取消分配的按钮
        $("#m-toRight").click(()=>{
            $("select:eq(0)>option:selected").appendTo("select:eq(1)")
        });
        $("#m-sub").click(()=>{
            $("select:eq(0)>option").prop("selected", true);
            $("#assignForm").submit();
        });
    })
</script>
</html>
